<template>
  <div class="app-container">
    <div @click="OptionCardClose">
      <el-row>
        <e-col :span=8>
          <el-button type="primary" @click="nweRoot">新建根目录</el-button>
        </e-col>
        <el-col :span=16>
          <el-input placeholder="输入关键字进行标签筛选" style="width: 60%;" v-model="filterText"></el-input>
        </el-col>
      </el-row>
      <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption" ref="tree"
        :filter-node-method="filterNode">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <i class="el-icon-folder" style="color: #DFBA49; margin-right: 5px;"></i>
          <span style="font-size: 15px;">{{ node.label }}</span>
        </span>
      </el-tree>
      <div :style="{
        'z-index': 9999, position: 'fixed', left: optionCardX + 'px',
        top: optionCardY + 'px', width: '100px', background: 'white',
        'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)'
      }" v-show="optionCardShow" id="option-button-group">
        <el-button @click="append()" class="option-card-button">新建标签
        </el-button>
        <el-button @click="remove" class="option-card-button">删除标签
        </el-button>
        <el-button @click="rename" class="option-card-button">重命名标签
        </el-button>
      </div>
    </div>


  </div>
</template>
<script>
import { createTag, queryTag, deleteTag } from '@/api/tagManage/tag.js'
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {

      filterText: "",//关键词查询
      optionData: {}, // 右键菜单所点击的节点
      optionCardShow: false, // 右键菜单是否显示
      optionCardY: '', // 右键菜单出现的位置
      optionCardX: '',
      node: null, // 当前右键点击的节点
      tree: null,

      data: [


      ]
    }
  },
  mounted() {
    this.queryTageList()

  },
  methods: {
    queryTageList() {
      queryTag().then(res => {
        if (res.code == 200) {
          console.log('res', res);
          this.data = [...res.data]
        }
      })
      console.log('111111111111111111');
      
      this.$forceUpdate()
    },
    // 关键词搜索标签
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 文件夹右键时触发的事件
    floderOption(e, data, n, t) {
      this.optionCardShow = false
      this.optionCardX = e.x   // 让右键菜单出现在鼠标右键的位置
      this.optionCardY = e.y - 110
      this.optionData = data
      this.node = n // 将当前节点保存
      this.tree = t
      this.optionCardShow = true  // 展示右键菜单
      // console.log('右键菜单获取到的数据', data)
    },

    // 点击除菜单以外其他区域，菜单隐藏
    // OptionCardClose 定义在菜单最高层父组件上
    OptionCardClose(event) {
      var currentCli = document.getElementById("option-button-group");
      if (currentCli) {
        if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
          this.optionCardShow = false;
        }
      }
    },

    // 新建一个根目录
    nweRoot() {
      this.$prompt('请输入标签名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,10}$/,
        inputErrorMessage: '标签名长度在1到10之间'
      }).then(({ value }) => {
        let params = {
          id: null,
          label: value,
          pid: null,
          code: '1'
        }
        createTag(params).then(res => {

          // console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '标签新建成功！'
            });
            this.queryTageList()
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
     

    },

    // 新增子元素
    append() {
      this.optionCardShow = false
      // console.log(this.optionData, '右键点击node节点')
      this.$prompt('请输入标签名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S{1,10}$/,
        inputErrorMessage: '标签名长度在1到10之间'
      }).then(({
        value
      }) => {
        //  标签层级限制
        /*     if (this.node.level >= 4) {
              this.$message.error("最多只支持四级！")
              return false;
            } */

        const newChild = {   // 新建一个子节点
          pid: this.optionData.id,   // 要在script中定义一个全局变量id
          label: value
        };
        createTag(newChild).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '根标签新建成功！'
            });
            this.queryTageList()
          }

        })
        // this.optionData.children.push(newChild);  // 插入
        //同时展开节点
        if (!this.node.expanded) {
          this.node.expanded = true
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });


    },

    // 删除子元素
    remove() {
      this.optionCardShow = false
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除子元素', this.optionData.id);

        deleteTag({ id: this.optionData.id }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '标签删除成功!'
            });
            this.queryTageList()
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 修改子元素名字
    rename() {
      console.log(this.optionData, 3333)
      this.optionCardShow = false
      this.$prompt('请输入标签名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: this.node.data.label,
        inputPattern: /^\S{1,10}$/,
        inputErrorMessage: '标签名长度在1到10之间'
      }).then(({
        value
      }) => {
        let params = {
          id: this.optionData.id,
          label: value,
        }
        createTag(params).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '标签已重命名！'
            });
            this.queryTageList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

  }
}
</script>
<style scoped>
/* 标签卡片 */
.folder-box {
  height: 100%;
}

/* 右键菜单按钮 */
.option-card-button {
  width: 100%;
  margin-left: 0;
  font-size: 10px;
  border-radius: 0;
}
</style>